<template>
  <div>
    <div class="divHeader">
      <div class="divItem1">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>全部商品</el-breadcrumb-item>
          <el-breadcrumb-item>分类</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="divItem2">
        <h2>分类</h2>
        <el-tabs
          v-model="activeName"
          type="card"
          @tab-click="handleClick"
          :before-leave="levaFn"
        >
        
          <el-tab-pane
            v-for="(item, index) in arr"
            :key="index"
            :label="item.category_name"
            :name="item.category_id + ''"
          >
          
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!-- 列表0 -->
    <div class="divMai">
      <ul>
        <li v-for="item in fade" :key="item.id" @click="goTo(item.product_id)">
          <img
            :src="'http://101.132.181.9:3000/' + item.product_picture"
            alt=""
          />
          <p>{{ item.product_name }}</p>
          <p class="pTwo">{{ item.product_title }}</p>
          <p class="pThree">{{ item.product_price }} 元</p>
        </li>
      </ul>
    </div>
  <div class="bottom5">
        <el-pagination
      background
      layout="prev, pager, next"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="lo.currentPage"
      :page-size="lo.pageSize"
      :total="total"
    >
    </el-pagination>
  </div>
  </div>
</template>

<script>
import { shopAll, getAllShop,getAllShops,getSearch} from "../../api/api";
export default {
  data() {
    return {
      num: 0,
      activeName: "",
      arr: [],
      lo: {
        currentPage: 1,
        pageSize: 15,
      },
      total: 0,
      fade: [],
      text:"",
    };
  },
  created() {
    this.getShopAll();
    this.getAlls();
    this.text=this.$route.query.search
    console.log("text",this.text);
  },
  activated() {
    this.activeName = "-1"; // 初始化分类列表当前选中的id为-1
    // this.total = 0; // 初始化商品总量为0
    // this.currentPage = 1; //初始化当前页码为1
    // 如果路由没有传递参数，默认为显示全部商品
    if (Object.keys(this.$route.query).length == 0) {
      this.categoryID = [];
      this.activeName = "0";
      return;
    }
    // 如果路由传递了categoryID，则显示对应的分类商品
    if (this.$route.query.categoryID != undefined) {
      this.categoryID = this.$route.query.categoryID;
      if (this.categoryID.length == 1) {
        this.activeName = "" + this.categoryID[0];
      }
      return;
    }
    // 如果路由传递了search，则为搜索，显示对应的分类商品
    if (this.$route.query.search != undefined) {
      this.search = this.$route.query.search;
      this.SearchGoods()
    }
  },
  methods: {
    // 搜索
    async SearchGoods(){
      const obj={
        search:this.text,
        currentPage:1,
        pageSize:10
      }
      let res=await getSearch(obj)
      console.log("search",res);
    },
    // 跳转详情
    goTo(v) {
      console.log(v, "v");
      this.$router.push({
        name: "details",
        params: {
          productID: v,
        },
      });
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.lo.pageSize=val
      this.getAlls()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
         this.lo.currentPage=val
      this.getAlls()
    },
    // 全部商品渲染
    async getAlls() {
      let res = await getAllShop(this.lo);
      console.log(res, "alls");
      if (res.code == "001") {
        this.fade = res.Product;
        this.total = res.total;
      }
    },
    // 所有商品名称
    async getShopAll() {
      let res = await shopAll();
      console.log(res, "all");
      if (res.code == "001") {
          const val = {
            category_id: 0,
            category_name: "全部"
          };
          const cate = res.category;
          cate.unshift(val);

        console.log(val, "val");
        // this.arr = {al,...res.category,};
        this.arr = cate
        console.log(this.arr, "obj");
      }
    },
    levaFn(activeName, oldActiveName) {
      console.log(activeName, oldActiveName);
      this.num = activeName;
      console.log(this.num);
    },
    async handleClick() {
       try {
         if(this.activeName=="0"){
           this.getAlls()
        }
        const obj={
          ...this.lo,
          categoryID:[Number(this.activeName)]
        }
      const res=await getAllShops(obj)
      console.log('goodsRes',res);
       this.fade=res.Product
       console.log(2)
.      this.total=res.total
       } catch (error) {}
    },
  },
};
</script>

<style scoped>
.bottom5{
  width: 100%;
  margin: auto;
  padding-left: 550px;
  padding-top: 20px;
}
li:hover {
  box-shadow: 10px 0px 10px 0 #d2d2d2;
  transform: translate(-1%, -1%);
}
.divMai {
  width: 90%;
  margin: auto;
}
.divMai ul {
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: center;
}
.divMai ul li {
  width: 18%;
  height: 280px;
  line-height: 20px;
  background-color: #fff;
  /* margin-left: 10px; */
  margin-top: 15px;
  text-align: center;
  font-size: 15px;
  overflow: hidden;
}
.divMai ul li img {
  width: 100%;
  height: 215px;
}
.pTwo {
  font-size: 10px;
  color: #ddd;
}
.pThree {
  color: rgb(215, 0, 0);
}
.divHeader {
  width: 100%;
  height: 110px;
  background-color: #fff;
  padding-left: 85px;
  /* line-height: 40px; */
}
.divItem1 {
  width: 100%;
  font-size: 30px;
  padding-top: 15px;
  margin-bottom: 40px;
}
.divItem2 {
  display: flex;
  justify-content: flex-start;
}
.divItem2 h2 {
  margin-right: 20px;
}
</style>